<template>
	<view >
		<nav-bar title="评价"></nav-bar>
		<view class="flexJcac">
			<view class="round">
				<round ref="round"></round>
			</view>
		</view>
		<view style="margin:30rpx;">
			<view>抽奖说明</view>
			<view>1.兑换规则</view>
			<view>2.说明由管理端配置</view>
		</view>
		
		<view class="btn_edit flexJcac">
			<view class="btn_cont btn_cont1" @click="cancelLd">
				返回
			</view>
			<view class="btn_cont" @click="sureLd">
				抽奖
			</view>
		</view>
		<you-popup
			:popupVisible="popupVisible"
			@popupClose="popupVisible = false"
			@cancel="clickCancel"
			@confirm="clickConfirm"
			:showTitle="check"
			bgColor="#fff"
			>
			<view slot="popupContent" >
		    <!-- 标题 -->
				<view class="contain-text" v-if="check"> 检测到评价有敏感词汇，请重新编辑</view>
				<view class="contain-text" v-else>
				<image src="https://cdn.uviewui.com/uview/common/classify/1/1.jpg" alt="" srcset="" />
				<text>奖品优惠券名称</text>
				</view>
			</view>
			<view slot="btnBox" class="flexJcac">
				<view class="btn wdithBtn" @click="popupVisible = false">确认</view>
			</view>
			<view slot="message" v-if="!check" class="meess">优惠券可在我的-优惠券查看</view>
		</you-popup>
	</view>
</template>

<script>
	import NavBar from '@/components/nav-bar/index.vue'
	import YouPopup from '@/components/you-popup/index.vue'
	import round from './components/round.vue'
	export default {
		components:{ NavBar, YouPopup, round },
		data(){
			return{
				mainHeight:'',
				popupVisible:false,
				check:true
			}
		},
		created() {
			this.mainHeight = this.$store.getters.heightData.mainHeight
		},
		methods:{
			nextTime(){
				this.popupVisible = true
			},
			sureLd(){
				this.$refs.round.startCallBack()
			},
			cancelLd(){
				this.popupVisible = false
				this.check = !this.check
			}
		}
		}
</script>

<style lang="scss" scoped>
	.round{
		margin-top: 50rpx;
		width: 673rpx;
		height: 704rpx;
		opacity: 1;
		border-radius: 25rpx;
		background: #FFFFFF;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.btn_edit{
		position: fixed;
		width: 100%;
		bottom: 0;
		height: 148rpx;
		opacity: 1;
		background: #FFFFFF;
		box-shadow: 0rpx -2rpx 13rpx  #ADADAD;
		.btn_cont{
			width: 300rpx;
			height: 94rpx;
			opacity: 1;
			border-radius: 63rpx;
			box-sizing: border-box;
			background: #C27E15;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 10rpx 10rpx 10rpx 10rpx;
			font-size: 30rpx;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			text-align: left;
			vertical-align: top;
		}
		.btn_cont1{
			color: #C27E15;
			background-color: #FFFFFF;
			margin-right: 20rpx;
			border: 1px solid #C27E15;
		}
	}
</style>